<template>
 <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="channel" label="渠道">
              <a-input placeholder="请输入渠道" v-model="model.channel"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="关联账号" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="flowerAccountTable.loading"
            :columns="flowerAccountTable.columns"
            :dataSource="flowerAccountTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
</template>

<script>

    import { FormTypes } from '@/utils/JEditableTableUtil'
    import { FlowerChannelFormMixin } from '@/mixins/FlowerChannelFormMixin'

    export default {
      name: 'FlowerChannelForm',
      mixins: [FlowerChannelFormMixin],
      data() {
        return {
          // 新增时子表默认添加几行空数据
          addDefaultRowNum: 0,
          model: {
          //设置默认值
           },
          validatorRules: {
          },
          refKeys: ['flowerAccount', ],
          activeKey: 'flowerAccount',
          // 账号管理
          flowerAccountTable: {
            loading: false,
            dataSource: [],
            columns: [
              /*{
                title: '渠道id',
                key: 'channelId',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
              {
                title: '渠道',
                key: 'channel',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },*/
              {
                title: '账号',
                key: 'account',
                type: FormTypes.input,
                defaultValue: '',
                placeholder: '请输入${title}',
              },
            ]
          },
          url: {
            add: "/flower/flowerChannel/add",
            edit: "/flower/flowerChannel/edit",
            flowerAccount: {
              list: '/flower/flowerChannel/queryFlowerAccountByMainId'
            },
          }
        }
      },
      methods: {
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
          // 加载子表数据
          if (this.model.id) {
            let params = { id: this.model.id }
            this.requestSubTableData(this.url.flowerAccount.list, params, this.flowerAccountTable)
          }
        },

        /** 整理成formData */
        classifyIntoFormData(allValues) {
          let main = Object.assign(this.model, allValues.formValue)
          return {
            ...main, // 展开
            flowerAccountList: allValues.tablesValue[0].values,
          }
        }
      }
    }
</script>

<style scoped>
</style>